<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>src写淘宝图</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			.big_pic{
				width: 400px;
				height: 400px;
				margin: 50px auto 20px;
				/*background: url(img/TB1.jpg) no-repeat;*/
			}
			.big_pic img{
				width: 400px;
				height: 400px;
			}
			.small_pic{
				width: 400px;
				margin: 0 auto;
				/*overflow: hidden;*/
			}
			.small_pic ul li{
				float: left;
				margin-right: 10px;
				border: 2px solid white ;
			}
			.small_pic ul li a img{
				width: 50px;
				height: 50px;
				vertical-align: bottom;
			}
		</style>
		<script type="text/javascript">
			//pic01
			function show01(){
				document.getElementById('pic01').src='img/TB1.jpg';
				
				document.getElementById('taobao01').style.borderColor='red';
				document.getElementById('taobao02').style.borderColor='white';
				document.getElementById('taobao03').style.borderColor='white';
				document.getElementById('taobao04').style.borderColor='white';
				document.getElementById('taobao05').style.borderColor='white';
			}
			
			//pic02
			function show02(){
				document.getElementById('pic01').src='img/TB2.jpg';
				
				document.getElementById('taobao01').style.borderColor='white';
				document.getElementById('taobao02').style.borderColor='red';
				document.getElementById('taobao03').style.borderColor='white';
				document.getElementById('taobao04').style.borderColor='white';
				document.getElementById('taobao05').style.borderColor='white';
			}
			
			//pic03
			function show03(){
				document.getElementById('pic01').src='img/TB3.jpg';
				
				document.getElementById('taobao01').style.borderColor='white';
				document.getElementById('taobao02').style.borderColor='white';
				document.getElementById('taobao03').style.borderColor='red';
				document.getElementById('taobao04').style.borderColor='white';
				document.getElementById('taobao05').style.borderColor='white';
			}
			
			//pic04
			function show04(){
				document.getElementById('pic01').src='img/TB4.jpg';
				document.getElementById('taobao04').style.borderColor='red';
				document.getElementById('taobao01').style.borderColor='white';
				document.getElementById('taobao02').style.borderColor='white';
				document.getElementById('taobao03').style.borderColor='white';
				document.getElementById('taobao05').style.borderColor='white';
			}
			
			//pic05
			function show05(){
				document.getElementById('pic01').src='img/TB5.jpg';
				document.getElementById('taobao05').style.borderColor='red';
				document.getElementById('taobao01').style.borderColor='white';
				document.getElementById('taobao02').style.borderColor='white';
				document.getElementById('taobao03').style.borderColor='white';
				document.getElementById('taobao04').style.borderColor='white';
			}
		</script>
	</head>
	<body>
		<div class="big_pic">
			<img src="img/TB1.jpg" id="pic01"/>
		</div>
		<div class="small_pic">
			<ul>
				<li id="taobao01" onmouseover="show01()">
					<a href="#">
						<img src="img/TB1.jpg"/>
					</a>
				</li>
				<li id="taobao02" onmouseover="show02()">
					<a href="#">
						<img src="img/TB2.jpg"/>
					</a>
				</li>
				<li id="taobao03" onmouseover="show03()">
					<a href="#">
						<img src="img/TB3.jpg"/>
					</a>
				</li>
				<li id="taobao04" onmouseover="show04()">
					<a href="#">
						<img src="img/TB4.jpg"/>
					</a>
				</li>
				<li id="taobao05" onmouseover="show05()">
					<a href="#">
						<img src="img/TB5.jpg"/>
					</a>
				</li>
			</ul>
		</div>
	</body>
</html>
